'use client';

import { use } from 'react';
import { useDonationHub } from '@/hooks/useDonationHub';
import './style.scss';

type Props = {
	params: Promise<{ channelSID: string }>;
};

const DEFAULT_ICON = '/images/default-avatar.png';

export default function CrewLeaderboardPage({ params }: Props) {
	const { channelSID } = use(params);
	const hubUrl = process.env.NEXT_PUBLIC_API_URL + '/hubs/donation';
	const { crewRanking } = useDonationHub(channelSID, hubUrl);

	return (
		<div className="crew-widget">
			<div className="crew-title">크루 리더보드</div>
			<div className="crew-list">
				{crewRanking.length === 0 && (
					<div className="crew-empty">크루 데이터 대기 중...</div>
				)}
				{crewRanking.map(item => {
					const rankClass = item.rank <= 3 ? `crew-rank-${item.rank}` : '';
					const topClass = item.rank <= 3 ? `top-${item.rank}` : 'top-default';
					return (
						<div key={item.crewMemberID} className={`crew-item ${rankClass}`}>
							<div className={`crew-rank-num ${topClass}`}>{item.rank}</div>
							<img className="crew-icon" src={item.icon || DEFAULT_ICON} alt={item.nickname} />
							<div className="crew-info">
								<div className="crew-nickname">{item.nickname}</div>
								{item.channelName && <div className="crew-channel">{item.channelName}</div>}
							</div>
							<div className="crew-stats">
								<div className="crew-amount">{item.totalAmount.toLocaleString()}원</div>
								<div className="crew-contribution">{item.contributionRate.toFixed(1)}%</div>
							</div>
						</div>
					);
				})}
			</div>
		</div>
	);
}